<template>
	<view id="material">
		<view class="nav-box">
			<view class="nav-box-text">
				<image src="@/static/img/home/person.png" class="person"></image>
				<view class="welcome">
					<view>
						<text>{{ userInfo.nickName }}</text>
					</view>
					<view>
						<text>{{ userInfo.dept.deptName }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="project">
			<text>{{ projectInfo.name }}</text>
			<button type="primary" size="mini" @click="drawerToggle('open')"><uni-icons type="search" color="#fff" size="14" /></button>
		</view>
		<view class="uni-list">
			<view class="list-item" v-for="(item, index) in listData" :key="index">
				<view class="list-item-line title">
					<text class="item-text">材料名称：{{ item.name }}</text>
				</view>
				<!-- <view class="list-item-line">
					<text class="sub-text short">标段</text>
					<text class="sub-text shorts">{{ item.bidSection }}</text>
				</view>
				<view class="list-item-line">
					<text class="sub-text">进场时间</text>
					<text class="sub-text u-margin-left-40">{{ item.approach }}</text>
				</view> -->
				<view class="list-item-line">
					<text class="sub-text">创建人</text>
					<text class="sub-text u-margin-left-70">{{ item.createUserName }}</text>
				</view>
				<view class="list-item-line">
					<text class="sub-text">检测状态</text>
					<text class="sub-text u-margin-left-40">{{ item.sample }}</text>
				</view>
				<view class="list-item-line">
					<text class="sub-text">
						<text class="short">状态</text>
					</text>
					<text class="sub-text shorts">
						<uni-tag text="草稿" type="success" size="small" v-if="item.status == 0" />
						<uni-tag text="退场" type="warning" size="small" v-if="item.status == -1" />
						<uni-tag text="待验收" type="warning" size="small" v-if="item.status == 1" />
						<uni-tag text="验收合格" type="warning" size="small" v-if="item.status == 9" />
					</text>
				</view>
				<view style="display: flex;justify-content: flex-end;">
					<uni-tag text="详情" class="u-margin-top-15" type="royal" size="small" @click="edit(item, '2')" />
					<uni-tag text="编辑" class="u-margin-top-15 u-margin-left-10" type="primary" size="small" @click="edit(item, '3')" v-if="item.status == '0'" />
					<uni-tag text="审核" class="u-margin-top-15 u-margin-left-10" type="warning" size="small" @click="audit(item)" v-if="item.canAudit" />
					<uni-tag text="删除" class="u-margin-top-15 u-margin-left-10" type="error" size="small" @click="Delete(item)" v-if="item.status == '0'" />
				</view>
			</view>
			<uni-load-more :status="status" :icon-size="16" :content-text="contentText"></uni-load-more>
		</view>
		<!-- <uni-load-more :status="status" :icon-size="16" :content-text="contentText" /> -->
		<view class="bottom-nav" v-if="userInfo.dept.type=='construct'"><button type="primary" class="btn" @click="edit('', '1')">新增</button></view>
		<uni-drawer ref="queryDrawer" :width="300" :maskClick="false" mode="right">
			<scroll-view style="height: 100%;" scroll-y="true">
				<view class="drawer-box">
					<uni-section title="条件搜索" type="line"></uni-section>
					<uni-list>
						<!-- 					<uni-list-item>
						<template v-slot:header><text class="slot-box">批次</text></template>
						<template v-slot:body><text style="width: 10px;"></text></template>
						<template v-slot:footer>
							<uni-easyinput v-model="query.batch" :inputBorder="false" placeholder="请输入批次" />
						</template>
					</uni-list-item> -->
						<uni-list-item>
							<template v-slot:header>
								<text class="slot-box">材料名称</text>
							</template>
							<template v-slot:body>
								<text style="width: 10px;"></text>
							</template>
							<template v-slot:footer>
								<uni-easyinput v-model="query.name" :inputBorder="false" placeholder="请输入材料名称" />
							</template>
						</uni-list-item>
						<uni-list-item>
							<template v-slot:header>
								<text class="slot-box">进场状态</text>
							</template>
							<template v-slot:footer>
								<picker @change="statusPickerChange" :value="statusIndex" :range="statusOptions" range-key="name">
									<view class="uni-input">{{ statusOptions[statusIndex].name }}</view>
								</picker>
							</template>
						</uni-list-item>
					</uni-list>
					<button @click="handleInitialize" type="primary" class="u-margin-20">查询</button>
					<button @click="drawerToggle('close')" type="default" class="u-margin-20" style="background-color: #fff;">取消</button>
				</view>
			</scroll-view>
		</uni-drawer>
	</view>
</template>

<script>
import { material, deleteMaterial, getAppMaterialList} from '@/api/material/index';
import {decrypt} from '@/common/jsencrpty.js';

export default {
	data() {
		return {
			userInfo: [],
			projectInfo: [],
			query: {
				name: '',
				batch: '',
				status: '',
				pageNum: 1,
				pageSize: 10,
				total: 0
			},
			listData: [],
			// 上拉加载相关
			last_id: '',
			reload: false,
			status: 'more',
			contentText: {
				contentdown: '上拉加载更多',
				contentrefresh: '加载中',
				contentnomore: '没有更多数据了'
			},
			// 项目状态
			statusOptions: [{ value: '', name: '全部' }, { value: -1, name: '退场' }, { value: 0, name: '草稿' }, { value: 1, name: '待验收' }, { value: 9, name: '验收合格' }],
			statusIndex: 0
		};
	},
	onLoad() {
		this.userInfo = uni.getStorageSync('userInfo');
		this.userInfo.nickName = decrypt(this.userInfo.nickName);
		this.projectInfo = uni.getStorageSync('projectInfo');
		this.getList()
	},
	onReachBottom() {
		if (this.status != 'noMore') {
			this.reload = true
			this.status = 'more'
			this.query.pageNum++
			this.getList()
		}
	},
	methods: {
		onBackPress(e) {
		   uni.navigateTo({
		    url: '/pages/menu/index'
		   })
		   return true;
		  },
		getList() {
			this.status = 'loading'
			getAppMaterialList(this.query.name, this.query.batch, this.query.status, this.query.pageNum).then(res=>{
				this.reload = false
				this.listData = this.listData.concat(res.rows)
				this.query.total = res.total
				if (this.query.pageNum*this.query.pageSize >= res.total) {
					this.status = 'noMore'
				} else {
					this.status = 'more'
				}
			})
		},
		view(row) {
			uni.navigateTo({
				url: '/pages/material/edit'
			});
		},
		edit(row, type) {
			uni.navigateTo({
				url: `/pages/material/edit?id=${row.id}&type=${type}`
			});
		},
		audit(row) {
			uni.navigateTo({
				url: `/pages/material/audit?id=${row.id}`
			});
		},
		handleInitialize() {
			this.query.pageNum = 1
			this.listData = []
			this.getList()
		},
		Delete(row) {
			uni.showModal({
				content: '确认删除？',
				confirmText: '确定',
				cancelText: '取消',
				success: res => {
					if (res.confirm) {
						this.handledelete(row);
					} else {
						//点击了取消
						console.log('取消');
					}
				}
			});
		},
		async handledelete(row) {
			//点击了确定
			const row1 = await deleteMaterial(row.id);
			if (row1.code == 200) {
				this.handleInitialize();
				uni.showToast({
					title: '删除成功',
					icon: 'success'
				});
			}
		},
		// 打开右侧查询抽屉
		drawerToggle(type) {
			if (type == 'open') {
				this.$refs.queryDrawer.open();
			} else {
				this.$refs.queryDrawer.close();
			}
		},
		statusPickerChange(e) {
			this.statusIndex = e.detail.value;
			let obj = this.statusOptions.find((item, index) => {
				return index === e.detail.value;
			});
			this.query.status = obj.value;
		}
	}
};
</script>
<style lang="scss" scoped>
	.shorts{
		margin-left: -27.37rpx;
	}
#material {
	background-color: #fafafa;
	min-height: 100vh;

	.nav-box {
		width: 100vw;
		height: 160px;
		margin-top: -44px;
		padding: 56px 20px 56px 20px;
		background-image: url(../../static/img/home/head-bg.png);

		.nav-box-text {
			height: 50px;
			display: flex;
			align-items: center;

			.person {
				width: 48px;
				height: 48px;
			}

			.welcome {
				color: #333;
				font-size: 32rpx;
				margin-left: 40rpx;
			}
		}
	}

	.project {
		padding: 10px;
		display: flex;
		border-radius: 8px;
		align-items: center;
		background-color: #fff;
		margin: -32px 20px 0 20px;
		justify-content: space-between;
		box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);

		text {
			font-size: 14px;
			font-weight: 700;
		}
		/deep/ uni-button {
			margin: 0;
			flex: 0 0 auto;
			padding: 2px 4px;
			line-height: normal;
		}
	}

	.uni-list {
		// margin-top: -20px;
		padding: 20px 20px 70px 20px;

		.list-item {
			padding: 10px;
			margin-top: 10px;
			min-height: 50px;
			background: #fff;
			border-radius: 8px;
			box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);

			.list-item-line {
				height: 36px;
				display: flex;
				position: relative;
				align-items: center;
				border-bottom: 1rpx solid #bfbfbf;

				.item-text {
					overflow: hidden;
					font-weight: 700;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.sub-text {
					color: #999;
				}

				.short {
					letter-spacing: 32px;
				}
			}

			.title {
				justify-content: space-between;
			}
		}
	}

	.bottom-nav {
		left: 0;
		bottom: 0;
		width: 100vw;
		height: 50px;
		padding: 10px;
		position: fixed;
		background-color: #fff;
		box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
	}
}
.drawer-box {
	height: 100vh;
	background-color: #f8f8f8;

	.uni-section {
		margin: 0;
		height: 36px;
	}
	.uni-input {
		color: #888;
	}
	.tree-select {
		flex: 1;
		color: #888;
		font-size: 14px;
		padding-left: 10px;
	}
	/deep/ .uni-easyinput__content {
		min-height: 24px;
	}
	/deep/ .uni-date__x-input {
		padding: 0;
		height: 24px;
		font-size: 12px;
		line-height: 24px;

		.uni-input-input {
			width: 80px;
		}
	}
	/deep/ .uni-date__icon-clear {
		top: 1px;
		margin: 0;
		border: 0;
	}
}
</style>
